<template>
    <div class="page">
        <div>
            <h5>文件名</h5>
            <el-input v-model="name"/>
        </div>
        <div>
            <h5>文件列表</h5>
            <el-upload
                    class="upload-demo"
                    action="/api/pack/upload"
                    :multiple="true"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </div>
        <div>
            <h5>打包</h5>
            <el-button type="primary" @click="pack">打包</el-button>
        </div>
        <div v-if="ok">
            <h5>下载</h5>
            <a :href="href">点我下载</a>
        </div>
    </div>

</template>

<script>
    import download from "../libs/download"
    export default {
        name: "FilePack",
        data(){
            return {
                name: "",
                fileList:[],
                list: [],
                ok: false,
                href: ""
            }
        },
            methods: {
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                    this.list.splice(this.list.indexOf(file), 1);
                },
                handlePreview(file) {
                    console.log(file);
                },
                handleSuccess(r, file){
                    if(r.success){
                        file.target = r.data;
                        this.list.push(file);
                    }
                },
                pack(){
                    var names = this.list.filter(e => e.target).map(e => e.target);
                    if(!this.name){
                        this.$notify.error("请输入打包名");
                        return
                    }
                    if(names.length === 0){
                        this.$notify.error("请上传至少一个文件");
                        return
                    }
                    this.ok = true;
                    this.$notify.success("打包完毕，请点击下面的链接下载");
                    this.href = `/api/pack/down?&name=${this.name}&names=${names.join(",")}`;
                    this.ok = true;
                    // download(``, this.name + ".zip");
                    // console.log(names);
                }
            }
    }
</script>

<style scoped>
    .page{
        padding: 10px;
    }
</style>